import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Tabs, Cell, Image } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import './my-order.less';

const goBack = () => {
  history.back();
}
const goOrderDetail = () => {
  history.push('/order-detail');
}
const goOrderDetailZz = () => {
  history.push('/order-detail-zizhu');
}
const goOrderDetailJd = () => {
  history.push('/order-detail-jiedan');
}

export default function MyOrderPage() {
  return (
    <div className='my-order'>
      <NavBar title='我的订单' leftText='返回' onClickLeft={goBack} />
      <Tabs defaultActive={0} sticky>
        <Tabs.TabPane title={`点单记录`}>
          <div className='my-order-list'>
            <Cell center isLink className='order-item' onClick={goOrderDetail}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                    <Flex.Item>
                      <div className='order-item-partner'>小熊</div>
                      <div className='order-item-type'>密室逃脱</div>
                      <div className='order-item-time'>2024-06-14 21:48:43</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item>
                  <div className='order-item-status'><span className='ing'>进行中</span></div>
                  <div className='order-item-price'>¥<span>990</span>.00</div>
                </Flex.Item>
              </Flex>
            </Cell>
            <Cell center isLink className='order-item' onClick={goOrderDetail}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/4da8c8bd4edeb6a3d7af34441fcaa0b4.jpg'/></Flex.Item>
                    <Flex.Item>
                      <div className='order-item-partner'>只只</div>
                      <div className='order-item-type'>微醺小酌</div>
                      <div className='order-item-time'>2024-06-13 20:38:12</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item>
                  <div className='order-item-status'><span className='done'>已完成</span></div>
                  <div className='order-item-price'>¥<span>1200</span>.00</div>
                </Flex.Item>
              </Flex>
            </Cell>
            <Cell center isLink className='order-item' onClick={goOrderDetail}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/c7510cfb880b71a573736cbdc99e8627.jpg'/></Flex.Item>
                    <Flex.Item>
                      <div className='order-item-partner'>蝴蝶</div>
                      <div className='order-item-type'>一起观影</div>
                      <div className='order-item-time'>2024-06-11 19:38:12</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item>
                  <div className='order-item-status'><span className='refund'>已退款</span></div>
                  <div className='order-item-price'>¥<span>800</span>.00</div>
                </Flex.Item>
              </Flex>
            </Cell>
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane title={`自助下单`}>
          <div className='my-order-list'>
            <Cell center isLink className='order-item' onClick={goOrderDetailZz}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item>
                      <div className='order-item-partner'>光谷塞尔维思</div>
                      <div className='order-item-type'>密室逃脱</div>
                      <div className='order-item-time'>2024-06-14 14:00 ~ 17:00</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item>
                  <div className='order-item-status'><span className='ing'>进行中</span></div>
                  <div className='order-item-price'><span>8</span> 人报名</div>
                </Flex.Item>
              </Flex>
            </Cell>
            <Cell center isLink className='order-item' onClick={goOrderDetailZz}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item>
                      <div className='order-item-partner'>街道口贰麻酒馆</div>
                      <div className='order-item-type'>微醺小酌</div>
                      <div className='order-item-time'>2024-06-13 20:00 ~ 23:00</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item>
                  <div className='order-item-status'><span className='done'>已完成</span></div>
                  <div className='order-item-price'><span>21</span> 人报名</div>
                </Flex.Item>
              </Flex>
            </Cell>
            <Cell center isLink className='order-item' onClick={goOrderDetailZz}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item>
                      <div className='order-item-partner'>雄楚1号幸福蓝海电影院</div>
                      <div className='order-item-type'>一起观影</div>
                      <div className='order-item-time'>2024-06-11 20:00 ~ 23:00</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item>
                  <div className='order-item-status'><span className='refund'>已退款</span></div>
                  <div className='order-item-price'><span>3</span> 人报名</div>
                </Flex.Item>
              </Flex>
            </Cell>
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane title={`接单记录`}>
          <div className='my-order-list'>
            <Cell center isLink className='order-item' onClick={goOrderDetailJd}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                    <Flex.Item>
                      <div className='order-item-partner'>Mr张</div>
                      <div className='order-item-type'>密室逃脱</div>
                      <div className='order-item-time'>2024-06-14 20:00 ~ 23:00</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item className='order-item-price'>¥<span>990</span>.00</Flex.Item>
              </Flex>
            </Cell>
            <Cell center isLink className='order-item' onClick={goOrderDetailJd}>
              <Flex align='center' justify='between'>
                <Flex.Item>
                  <Flex align='center' gutter={10}>
                    <Flex.Item><Image lazyload round width='48' height='48' fit='cover' src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg'/></Flex.Item>
                    <Flex.Item>
                      <div className='order-item-partner'>菲利</div>
                      <div className='order-item-type'>线下开黑</div>
                      <div className='order-item-time'>2024-06-13 20:00 ~ 23:00</div>
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
                <Flex.Item className='order-item-price'>¥<span>800</span>.00</Flex.Item>
              </Flex>
            </Cell>
          </div>
        </Tabs.TabPane>
      </Tabs>
      <SafeArea position='bottom' />
    </div>
  );
}
